<template>
	<el-row>
		<el-col class="code-left">
			<el-menu :default-openeds="openeds" class="el-menu-code" :style="'height:'+menuHeight+'px'">
				<el-submenu v-for="(item,index) in typeData" :key="index" :index="(index+1)+''">
					<template slot="title">
						<span>{{item.name}}</span>
					</template>
					<el-menu-item v-for="(row,index2) in item.children" :key="index2" :index="(index+1)+'-'+(index2+1)"
						@click="selectCode(row)">
						{{row.name}}
						<div class="tool">
							<el-popover placement="right" title="" width="130" trigger="hover">
								<div>
									<el-button size="mini" type="primary"
										@click="$refs.modifytype.handelModify(row,typeData)">修改</el-button>
									<el-button type="danger" size="mini" @click="typeDelete(row)">删除</el-button>
								</div>
								<el-link slot="reference" :underline="false" icon="el-icon-setting"></el-link>
							</el-popover>
						</div>
					</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-col>
		<el-col class="code-right">
			<el-row>
				<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" :model="filters">
						<el-form-item label="字典值">
							<el-input v-model="filters.key" clearable placeholder="关键字"></el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-select v-model="filters.status" clearable placeholder="字典值状态">
								<el-option v-for="item in options" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="searchs" icon="el-icon-search">搜索</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="success" icon="el-icon-plus" @click="$refs.modifytype.handleAdd(typeData)">
								添加字典栏位
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-plus" @click="handleAddCode">添加字典
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
				<template>
					<el-table :data="tableData.items" style="width: 100%;margin-bottom: 20px;" row-key="id"
						v-loading="loading" border :height="tableHeight" default-expand-all>
						<el-table-column type="index" width="80" label="序号"></el-table-column>
						<el-table-column prop="name" label="字典名称"></el-table-column>
						<el-table-column prop="codeValues" label="字典阔值" width="180"></el-table-column>
						<el-table-column prop="sort" label="排序" width="80"></el-table-column>
						<el-table-column prop="status" label="状态" width="100">
							<template slot-scope="scope">
								<el-link :underline="false" :type="scope.row.status ? 'primary' : 'warning'">
									{{scope.row.status?'启用':'停用'}}</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
						<el-table-column fixed="right" label="操作" width="160">
							<template slot-scope="scope">
								<el-link icon="el-icon-edit" :underline="false" type="primary"
									@click="$refs.modifycode.handelModify(scope.row)">修改</el-link>
								<el-link icon="el-icon-delete" :underline="false" type="danger"
									@click="deletes(scope.row)" style="margin-left:15px;">删除</el-link>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="tableData.currentPage" :page-sizes="[10, 20, 50, 100,200,500,1000]"
						:page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalItems">
					</el-pagination>
				</template>
			</el-row>
		</el-col>
		<modifycode ref="modifycode" @complete="onCodeComplete"></modifycode>
		<modifytype ref="modifytype" @complete="onTypeComplete"></modifytype>
	</el-row>
</template>

<script>
	import modifytype from './modifytype'
	import modifycode from './modifycode'
	export default {
		components: {
			modifytype,
			modifycode
		},
		data() {
			return {
				visible: false,
				menuHeight: window.innerHeight - 100,
				tableHeight: window.innerHeight - 230,
				filters: {
					key: '',
					status: '',
					limit: 10,
					page: 1
				},
				loading: true,
				options: [
					{
						value: 1,
						label: '启用'
					},
					{
						value: 2,
						label: '停用'
					}
				],
				typeData: [],
				tableData: {},
				openeds: [],
				selectType: {
					id: '0'
				}
			}
		},
		mounted() {
			this.init()
			this.tableInit();
		},
		methods: {
			selectCode(m) {
				this.selectType = m;
				this.loading = true
				this.tableInit();
			},
			typeDelete(m) {
				if (m.isSystem) {
					this.$notify({
						message: '系统内置默认不能删除~',
						type: 'warning'
					})
					return;
				}
				var _this = this
				this.$confirm(
					'确认删除【' + m.name + '】字典栏位吗',
					'提示',
					{
						type: 'warning'
					}
				).then(() => {
					this.$api.sys.codetype
						.delete([m.id])
						.then(({ statusCode, data, message }) => {
							if (statusCode == 200) {
								this.$notify({
									message: '删除成功',
									type: 'success'
								})
								this.init()
							} else {
								this.$notify({
									message: message,
									type: 'error'
								})
							}
						})
						.catch(() => {

						})
				})
			},
			init: function () {
				let _this = this;
				this.$api.sys.codetype
					.list()
					.then(({ statusCode, data }) => {
						this.typeData = data;
						data.forEach(function (item, i) {
							if (item.parentId == '0') {
								_this.openeds.push((i + 1) + '');
							}
						})
					})
					.catch(() => {
						this.$notify({
							message: '获得栏位错误',
							type: 'success'
						})
					})
			},
			tableInit: function () {
				let _this = this;
				this.$api.sys.code
					.list({ key: this.filters.key, status: this.filters.status ? this.filters.status : 0, limit: this.filters.limit, page: this.filters.page, id: this.selectType.id })
					.then(({ statusCode, data }) => {
						this.loading = false
						this.tableData = data;
					})
					.catch(() => {
						this.$notify({
							message: '获得栏位错误',
							type: 'success'
						})
					})
			},
			searchs: function () {
				this.loading = true
				this.tableInit()
			},
			deletes: function (m) {
				var _this = this
				this.$confirm(
					'确认删除【' + m.name + '】吗?',
					'提示',
					{
						type: 'warning'
					}
				).then(() => {
					this.loading = true
					this.$api.sys.code
						.delete([m.id])
						.then(({ statusCode, data, message }) => {
							if (statusCode == 200) {
								this.$notify({
									message: '删除成功',
									type: 'success'
								})
								this.tableInit()
							} else {
								this.$notify({
									message: message,
									type: 'error'
								})
							}
						})
						.catch(() => {
							this.loading = false
						})
				})
			},
			handleSizeChange(val) {
				this.filters.page = 1
				this.filters.limit = val
				this.tableInit()
			},
			handleCurrentChange(val) {
				this.filters.page = val
				this.tableInit()
			},
			handleAddCode() {
				if (this.selectType.id == '0') {
					this.$notify({
						message: '请选择字典栏位，在添加字典值~',
						type: 'warning'
					})
				}
				else {
					this.$refs.modifycode.handleAdd(this.selectType)
				}
			},
			onCodeComplete() {
				this.tableInit()
			},
			onTypeComplete() {
				this.init()
			}
		}
	}

</script>
<style lang="scss">
	.code-left {
		width: 200px !important;
		position: relative;
		margin-top: 10px;

	}

	.code-left::after {
		content: '';
		position: absolute;
		height: 1px;
		width: 100%;
		left: -19px;
		top: 0px;
		background-color: #e6e6e6;
	}

	.el-popover {
		min-width: 80px !important;
	}

	.el-menu-code {
		left: -19px;
		overflow: auto;



		.el-menu-item {
			position: relative;

			.tool {
				position: absolute;
				right: 10px;
				top: -1px;
			}
		}

		.el-menu-item,
		.el-submenu__title {
			height: 42px;
			line-height: 42px;
		}
	}

	.code-right {
		width: calc(100% - 200px) !important;
	}
</style>